<template>
	<view class="z-padding-b-32">
		<u-sticky>
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<view class="top_title" :style="'padding-top:'+safeT+'px;'+'padding-right:'+safeR+'px;'+'height:'+safeH+'px;'">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="top_title" :style="'padding-top:'+safeT+'px;'">
			<!-- #endif -->
			
				<view class="">{{mycity}}</view>
				<view @click="$goTo('/pageA/signIn/signIn')" class="img"><image src="../../static/index/sign-in.png" mode=""></image></view>
			</view>
			<image src="../../static/index/index_top.png" class="top_img" mode=""></image>
			<!-- 搜索盒子 -->
			<view class="top_search_box " @click="$goTo('/pageA/searchpage/searchpage')">
				<view class="top_search_box_content_box" >
					<input disabled class="top_search_box_content"   type="text" placeholder="搜索服务 如：租房" />
					<view class="search_btn z-padding-tb-8 z-padding-lr-32 z-margin-lr-16 z-radius-32">
						搜索
					</view>
				</view>
			</view>
		</view>
		</u-sticky>
		
		<!-- 轮播图 -->
		<view class="swiper_box">
			<u-swiper style="height: 264rpx;" radius=10 keyName='image' :list="list1" @change="change"></u-swiper>
		</view>

		<view class="threeitem_box z-radius-16 z-padding-lr-32 z-font-28 z-padding-tb-24">
			<view class="threeitem">
				<image src="../../static/index/zj1.png" class="threeitem_img" mode=""></image>
				<view class=" z-margin-l-16 text_999">
					访问：<text class="z-font-w">{{click_count}}</text>
				</view>
			</view>
			<view class="threeitem">
				<image src="../../static/index/shop.png" class="threeitem_img" mode=""></image>
				<view class=" z-margin-l-16 text_999">
					商家：<text class="z-font-w">{{company_count}}</text>
				</view>
			</view>
			<view class="threeitem">
				<image src="../../static/index/serve.png" class="threeitem_img" mode=""></image>
				<view class=" z-margin-l-16 text_999">
					服务：<text class="z-font-w">{{info_count}}</text>
				</view>
			</view>
		</view>
		<u-scroll-list :indicator ='indicator' indicatorActiveColor="#FF824A" @right="onright" @left="onleft">
			<view class="scroll-list">
				<view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
					<view class="scroll-list__line__item" @click="$goTo('/pageA/secondaryMenu/secondaryMenu?title='+item1.name + '&id=' + item1.id)" v-for="(item1, index1) in item" :key="index1"
						:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
						<image class="scroll-list__line__item__image" :src="$oss(item1.image)" mode="widthFix"></image>
						<text class="scroll-list__line__item__text z-margin-t-16">{{ item1.name }}</text>
					</view>
				</view>
			</view>
		</u-scroll-list>
		
		<view class="one_advertise z-padding-32" v-if="advertisement.length==1" @click="$goTo('pageA/goodsdetail/goodsdetail?id=' + advertisement[0].id)">
			<view class="one_advertise_left" >
				<view class="one_advertise_title z-padding-b-16 z-font-w">
					{{advertisement[0].title}}
				</view>
				<view class="one_advertise_tag z-font-24 hidden">
					{{advertisement[0].tags}}
				</view>
			</view>
			 <image class="z-radius-16" :src="$oss(advertisement[0].image)" mode="aspectFill"></image>
		</view>
		
		<view class="z-flex-x-s-b handpick-box z-margin-t-16" v-if="advertisement.length==2" >
			<view class="handpick bac-1 z-flex-x-s-a" @click="$goTo('pageA/goodsdetail/goodsdetail?id=' + advertisement[0].id)">
				<view class=" handpick-l">
					<view class="z-font-30 hidden">{{advertisement[0].title}}</view>
					<view class="z-font-22 z-margin-t-8 hidden" style="color: rgba(255,255,255,0.5);">{{advertisement[0].tags}}</view>
				</view>
				<view class="handpick-r  "> <image class="z-radius-16"  :src="$oss(advertisement[0].image)" mode=""></image> </view>
			</view>
			<view class="handpick bac-2 z-flex-x-s-a" @click="$goTo('pageA/goodsdetail/goodsdetail?id=' + advertisement[1].id)">
				<view class=" handpick-l ">
					<view class="z-font-30 hidden">{{advertisement[1].title}}</view>
					<view class="z-font-22 z-margin-t-8 hidden" style="color: rgba(255,255,255,0.5);">{{advertisement[1].tags}}</view>
				</view>
				<view class="handpick-r"> <image class="z-radius-16" :src="$oss(advertisement[1].image)" mode=""></image> </view>
			</view>
		</view>
		
		<view class="handpick-three z-flex-x-s-b z-margin-t-32" v-if="advertisement.length==3">
			<view class="three-l" @click="$goTo('pageA/goodsdetail/goodsdetail?id=' + advertisement[0].id)">
				<view class="z-font-30 z-font-w hidden">{{advertisement[0].title}}</view>
				<view class="z-font-22 z-margin-t-8 text-a4a hidden">{{advertisement[0].tags}}</view>
				<view class="ck-btn">立即查看</view>
				 <image class="z-radius-16" :src="$oss(advertisement[0].image)" mode=""></image>
			</view>
			<view class="three-r">
				<view class="three-r-each z-flex-x-s-a" @click="$goTo('pageA/goodsdetail/goodsdetail?id=' + advertisement[1].id)">
					<view class="">
						<view class="z-font-26 z-font-w hidden">{{advertisement[1].title}}</view>
						<view class="z-font-22 z-margin-t-8 text-a4a hidden">{{advertisement[1].tags}}</view>
					</view>
					<view class="">  <image class="z-radius-16" :src="$oss(advertisement[1].image)" mode=""></image> </view>
				</view>
				<view class="three-r-each z-flex-x-s-a z-margin-t-24" @click="$goTo('pageA/goodsdetail/goodsdetail?id=' + advertisement[2].id)">
					<view class="">
						<view class="z-font-26 z-font-w hidden">{{advertisement[2].title}}</view>
						<view class="z-font-22 z-margin-t-8 text-a4a hidden">{{advertisement[2].tags}}</view>
					</view>
					<view class="">  <image class="z-radius-16" :src="$oss(advertisement[2].image)" mode=""></image> </view>
				</view>
			</view>
		</view>
		
		<view class="handpicks z-margin-t-32 z-padding-16" v-if="advertisement.length>3">
			<view class="z-flex-x-s-b handpicksitem">
				<view class="three-r-each z-flex-x-s-a"  v-for="i in advertisement" @click="$goTo('pageA/goodsdetail/goodsdetail?id=' +i.id)">
					<view class="">
						<view class="z-font-26 z-font-w hidden">{{i.title}}</view>
						<view class="z-font-22 z-margin-t-8 text-a4a hidden">{{i.tags}}</view>
					</view>
					<view class=""> <image class="z-radius-16" :src="$oss(i.image)" mode=""></image> </view>
				</view>
				<!-- <view class="rod"></view> -->
				<!-- <view class="three-r-each z-flex-x-s-a">
					<view class="">
						<view class="z-font-26 z-font-w">精选二手房</view>
						<view class="z-font-22 z-margin-t-8 text-a4a">精装修 户型好</view>
					</view>
					<view class=""> <image src="../../static/logo.png" mode=""></image> </view>
				</view> -->
			</view>
			<!-- <view class="wire"></view> -->
			<!-- <view class="z-flex-x-s-b">
				<view class="three-r-each z-flex-x-s-a">
					<view class="">
						<view class="z-font-26 z-font-w">精选二手房</view>
						<view class="z-font-22 z-margin-t-8 text-a4a">精装修 户型好</view>
					</view>
					<view class=""> <image src="../../static/logo.png" mode=""></image> </view>
				</view>
				<view class="rod"></view>
				<view class="three-r-each z-flex-x-s-a">
					<view class="">
						<view class="z-font-26 z-font-w">精选二手房</view>
						<view class="z-font-22 z-margin-t-8 text-a4a">精装修 户型好</view>
					</view>
					<view class=""> <image src="../../static/logo.png" mode=""></image> </view>
				</view>
			</view> -->
		</view>
		
		<!-- 推荐商家 -->
		<view class="tj_shop mainbox">
			<image src="../../static/index/tjtext.png" class="tjtext" mode=""></image>
			<image src="../../static/index/tjimg.png" class="tjimg" mode=""></image>
			<view class="mainbox shopitem" v-for="i in companylist" @click="tostore(i)">
				<image src="../../static/index/tjtips.png" class="tjtips" mode=""></image>
				<image :src="$oss(i.logo)" class="z-radius-24 z-margin-r-16 shopitem_img" mode="aspectFill">
				</image>
				<view class="shopitem_right">
					<view class="shopitem_right_item">
						<image src="../../static/index/qiye.png" class="shopitem_right_item_img z-margin-r-16" mode="">
						</image>
						<image v-if="i.is_plus==1" src="../../static/index/vip.png" class="shopitem_right_item_img z-margin-r-16" mode="">
						</image>
						<view class="z-font-w hidden">
							{{i.company}}
						</view>
					</view>
					<view class="shopitem_right_item text_999 z-font-22">
						{{i.address}}
					</view>
					<view class="shopitem_right_item overflow" v-if="i.tags">
						<view class="shopitem_right_item_tips text_999 z-radius-8 z-margin-r-8 z-padding-8" v-for="(item,index) in i.tags">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tablist -->
		<view class="z-margin-32 tags-box">
			<!-- <u-tabs :list="list" lineWidth=0 :inactiveStyle='inactiveStyle' @click="clicktab"></u-tabs> -->
			<view :class="{'cur-tag':tag == index}" @click="choose(index,i.id)" v-for="(i,index) in tags">{{i.name}}</view>
		</view>
		
		
			<view class="">
				<typeList :mylist='mylist' :type="1"></typeList>
				<typeList :mylist='mylist' :type="2"></typeList>
				<typeList :mylist='mylist' :type="3"></typeList>
				<typeList :mylist='mylist' :type="4"></typeList>
				<typeList :mylist='mylist' :type="5"></typeList>
				<typeList :mylist='mylist' :type="6"></typeList>
				<typeList :mylist='mylist' :type="7"></typeList>
			</view>
			<u-empty class="z-padding-tb-32" icon='https://cdn.uviewui.com/uview/empty/list.png' v-if="mylist==''"></u-empty>
		
		
		
		
		
		
	</view>
</template>

<script>
	import typeList from "@/components/typelist.vue"
	export default {
		components:{
			typeList
		},
		data() {
			return {
				info_count:'',
				company_count:'',
				click_count:'',
				safeT: this.$safeT,
				safeR: this.$safeR,
				safeH: this.$safeH,
				companylist:[],
				inactiveStyle:{ color: '#999' },
				list1: [],
				tags:[],
				tag:0,
				indicator:false,
				mylist:[],
				mycity:'获取中~',
				page:1,
				cate_id:'',
				menuArr: [],
				advertisement:[],
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
			}
		},
		onLoad() {
			console.log(111111)
			console.log(this.$safeT)
			console.log(this.$goTo)
			var that = this
			// this.barHeight = uni.getSystemInfoSync().statusBarHeight
			this.getCateList()

				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						uni.setStorageSync('lng', res.longitude)
						uni.setStorageSync('lat', res.latitude)
						that.$api.post('/same/index/getlocation', {
							lng: res.longitude,
							lat: res.latitude,
						}).then(res => {
							if(res.data.city.length==0){
								uni.setStorageSync('city',res.data.province)
								that.mycity = res.data.province
							}else{
								uni.setStorageSync('city',res.data.city)
								that.mycity = res.data.city
							}
						})
					}
				});
			
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			
			
			this.page++
			this.getList()
		},
		methods: {
			scrolltolower(){
				
				this.page++
				this.getList()
			},
			tostore(i){
				
				uni.navigateTo({
					url:'/pageA/storeHomepage/storeHomepage?title='+i.company + '&id=' + i.id,
					animationType: 'pop-in',
					animationDuration: 2100
				})
			},
			onleft() {
				
			},
			onright() {
				
			},
			//分类函数
			newarr(N, Q) {
				var R = [],
					F;
				for (F = 0; F < Q.length;) {
					R.push(Q.slice(F, F += N))
				}
				return R
			},
			//首页信息
			init(){
				this.$api.post('/same/index/index',{}).then(res=>{
					this.list1 = res.data.album
					this.list1.map(item=>{
						return item.image = this.$oss(item.image)
					})
					this.advertisement =res.data.advertisement
					this.click_count = res.data.click_count
					this.company_count = res.data.company_count
					this.info_count = res.data.info_count
					this.companylist = res.data.company
					let realnum = 0
					
					if(res.data.cateList.length>10){
						this.indicator = true
					}
					if(res.data.cateList.length<6){
						this.menuArr = [res.data.cateList]
					}else{
						if(res.data.cateList.length % 2 == 0){
							realnum = res.data.cateList.length/2
						}else{
							realnum = (res.data.cateList.length+1)/2
						}
						this.newarr(realnum, res.data.cateList)
						
						this.menuArr = this.newarr(realnum, res.data.cateList)
					}
					
					
				})
			},
			//分类列表
			getCateList(){
				this.$api.post('/same/index/getCateList',{pid:0}).then(res=>{
					this.tags = res.data
					this.cate_id = res.data[0].id
					this.getList()
				})
			},
			choose(index,id){
				this.mylist=[]
				this.page=1
				this.tag = index
				this.cate_id = id
				this.getList()
			},
			//列表
			getList(){
				this.$api.post('/same/info/getList',{
					page:this.page,
					cate_id:this.cate_id,
					// city:uni.getStorageSync('city')
				}).then(res=>{
					this.mylist = [...this.mylist,...res.data.list]
				})
			},
			change(e) {
				
			},
			clicktab(e){
				
			}
		}
	}
</script>

<style lang="scss">
	.scroll_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-wrap: wrap;

		.scroll_img {
			width: 90rpx;
			height: 97rpx;
		}
	}

	.scroll-list {
		@include flex(column);
		box-sizing: border-box;
		margin: 0;
		padding: 0 40rpx 0 40rpx;
		margin-top: 24rpx;

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 50rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				&__image {
					// width: 61px;
					// height: 48px;
					width: 95rpx;
					height: 97rpx;
				}
				&__text {
					color: #000;
					font-size: 24rpx;
					position: relative;
					top: -20rpx;
					flex-shrink: 1;
				}
				&--no-margin-right {
					margin-right: 0;
					
				}
			}
		}
	}
	::v-deep .u-scroll-list__indicator {
		margin-top: 0 !important;
	}

	.top {
		height: 317rpx;
		position: relative;
		box-sizing: border-box;
		opacity: 1;
		background-color: #F6F8FC;
		

		.top_img {
			position: absolute;
			left: 0;
			top: 0;
			height: 317rpx;
			opacity: 1;
		}

		.top_title {
			position: relative;
			z-index: 100;
			font-size: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			color: #1C274C;
			padding-left: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.img{
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.top_search_box {
			position: absolute;
			bottom: 5rpx;
			left: 5%;
			width: 686rpx;
			height: 86rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			// border: 3rpx solid;
			border-radius: 43rpx 43rpx 43rpx 43rpx;
			background: linear-gradient(90deg, rgba(141, 187, 220, 1), rgba(176, 141, 220, 1), rgba(255, 130, 74, 1));

			.top_search_box_content_box {
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				width: 678rpx;
				height: 78rpx;
				margin: 0 auto;
				box-sizing: border-box;

				.top_search_box_content {
					width: 636rpx;
					height: 66rpx;
					margin-left: 1rpx;
					margin-top: 2rpx;
					background: #fff;
					color: #000;
					text-align: left;
					padding-left: 30rpx;
					border-radius: 43rpx 43rpx 43rpx 43rpx;
					flex: 1;
				}

				.search_btn {
					color: #fff;
					background: linear-gradient(90deg, #FFAF8B 0%, #FF824A 100%);
				}
			}

		}
	}

	.swiper_box {
		width: 686rpx;
		// margin: 30rpx auto 0;
		margin: 30rpx auto;
		// margin-top: 14rpx;
		height: 264rpx;
	}

	.threeitem_box {
		display: flex;
		align-items: center;
		background-color: #fff;
		width: 686rpx;
		margin: 30rpx auto 0;
		justify-content: space-between;
		box-sizing: border-box;

		.threeitem {
			display: flex;
			align-items: center;

			.threeitem_img {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.one_advertise{
		margin: 0 auto;
		box-sizing: border-box;
		width: 686rpx;
		
		background: #FEE7D7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 24rpx;
		.one_advertise_left{
			display: flex;
			align-items: center;
			flex-direction: column;
			.one_advertise_title{
				font-size: 40rpx;
				color: #FF824A;
			}
			.one_advertise_tag{
				color: #fff;
				background: #FFA84E;
				display: inline;
				border-radius: 23rpx;
				box-sizing: border-box;
				padding: 10rpx 27rpx;
			}
		}
		>image{
			width: 242rpx;
			height: 181rpx;
		}
	}
	.handpick-box {
		width: 686rpx;
		margin: auto;
		.handpick {
			.handpick-l {
				color: #FFFFFF;
			}
			.handpick-r {
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
		.bac-1 {
			width: 331rpx;
			height: 150rpx;
			background: linear-gradient(90deg, #8FC1FF 0%, #2080FE 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
		}
		.bac-2 {
			width: 331rpx;
			height: 150rpx;
			background: linear-gradient(90deg, #FEB07D 0%, #FD8B57 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
		}
	}
	
	.handpick-three {
		width: 686rpx;
		margin: auto;
		.three-l {
			width: 297rpx;
			height: 292rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			position: relative;
			padding: 34rpx 0 0 32rpx;
			image {
				width: 188rpx;
				height: 188rpx;
				position: absolute;
				bottom: 12rpx;
				right: 1rpx;
			}
			.ck-btn {
				width: 128rpx;
				height: 48rpx;
				background: #FF824A;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				opacity: 1;
				font-size: 22rpx;
				text-align: center;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 48rpx;
				position: relative;
				z-index: 9;
				margin-top: 16rpx;
			}
		}
		.three-r {
			.three-r-each {
				width: 331rpx;
				height: 150rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				opacity: 1;
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
	
	.handpicks {
		width: 686rpx;
		
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		margin: auto;
		.handpicksitem{
			display: flex;
			flex-wrap: wrap;
		}
		.wire {
			width: 622rpx;
			height: 1rpx;
			opacity: 1;
			background-color: #EDEEF1;
			margin: auto;
		}
		.rod {
			width: 1rpx;
			height: 103rpx;
			opacity: 1;
			background-color: #EDEEF1;
		}
		.three-r-each {
			width: 331rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.tj_shop {
		background-color: #FDF4ED;
		position: relative;

		.tjtext {
			width: 120rpx;
			height: 26rpx;
		}

		.tjimg {
			width: 126rpx;
			height: 52rpx;
			position: absolute;
			top: 0;
			left: 60%
		}

		.shopitem {
			width: 100%;
			position: relative;
			align-items: center;
			display: flex;

			.tjtips {
				position: absolute;
				top: 0;
				right: 0;
				width: 61rpx;
				height: 61rpx;
				image-rendering: -webkit-optimize-contrast;
			}

			.shopitem_img {
				width: 200rpx;
				height: 142rpx;
			}

			.shopitem_right {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				// height: 142rpx;
				// flex: 1;
				
				.overflow {
					overflow: hidden;
					overflow-x: auto;
					white-space: nowrap;
				}
				.shopitem_right_item {
					display: flex;
					align-items: center;
					width: 369rpx;
					margin-top: 16rpx;

					.shopitem_right_item_img {
						width: 28rpx;
						height: 28rpx;
					}

					.shopitem_right_item_tips {
						background-color: #F6F8FC;
						font-size: 20rpx;
						
					}

					.shopitem_right_item_tips:nth-child(n+2) {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
	
	.tags-box {
		display: flex;
		font-size: 26rpx;
		font-weight: 500;
		color: #A4A9B7;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		view {
			margin-right: 80rpx;
		}
		.cur-tag {
			font-size: 26rpx;
			font-weight: bold;
			color: #1C274C;
		}
	}
</style>